<!--
 * @Descripttion:  
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-12 11:20:30
 * @LastEditors: GW
 * @LastEditTime: 2021-08-12 16:15:12
-->
<template>
    <div class="content-wrapper a-base-container"  @contextmenu.prevent="otder($event)">

        <!-- 序号表头 -->
        <div class="conten-title conten-tz" style="border-bottom: 0;" >
           <div>序号</div>
           <div>工程/客户名称</div>
           <div>产品名称</div>
           <div>规格(mm)</div>
           <div>颜色</div>
           <div>数量(件)</div>
           <div>出货日期</div>
        </div>
        <div :style="X_Y_city" v-if='city_hide'>
           <div>单击案例</div>
           
        </div>

    </div>
</template>
 
<script>
import input from '../../crm/activity/components/edit/input.vue';

export default {
  components: { input },
    data () {
      return {
          X_Y_city: '',
          city_hide: false,
      }
    },
 
    methods: {
      otder(e){
        this.X_Y_city = 'top:' + e.pageY + 'px;' + 'left:' + e.pageX + 'px;' + 'position: absolute;'
        this.city_hide = true;
        console.log(e)
      }
    }
};
</script>
<style lang="less">
    .conten-button {
      display: flex;
      width: 80%;
      div{
        width: 30%;
      }
    }
    // 记录/ 研发 
    .conten-jl {
      border: 1px solid #cacaca;
      border-bottom: 0;
      border-top: 0;
      display: flex;
      .conten-jl-one {
        border: 1px solid #cacaca;
        border-bottom: 0;
        border-top: 0;
        width: 40%;
      }
      .conten-jl-tow {
         border: 1px solid #cacaca;
         border-bottom: 0;
         border-top: 0;
          width: 60%;
      }
    }

    // 备注
    .conten-bz {
      height: 200px;
      width: 80%;
      display: flex;
      border: 1px solid #cacaca;
      border-bottom: 0;
      .conten-bz-one {
        width: 15%;
        border: 1px solid #cacaca;
        border-bottom: 0;
        height: 200px;
        line-height: 200px;
      }
      .conten-bz-tow {
         height: 200px;
         width: 85%;
          border: 1px solid #cacaca;
      }
    }
    // 复选
    .conten-chec{
      display: flex;
      flex-wrap: wrap;
      width: 80%;
      border: 1px solid #cacaca;
      border-bottom: 0;
      div{
        padding:  0 0 0 15px;
        height: 50px;
        line-height: 50px;
      }
    }
    // 订单
    .conten-order {
      display: flex;
      width: 80%;
      .conten-order-one {
        width: 65%;
      }
       .conten-order-tow{
        width: 14%;
      }
    
    }

    .content-app-wrapper {
        height: 100%;
        overflow-y: auto;
        padding: 10px;
    }
    .conten-top {
      display: flex;
      width: 80%;
      height: 100px;
      line-height: 100px;
    }
    .conten-title {
      display: flex;
      div{
        border: 1px solid #cacaca;
        border-bottom: 0;
        width: 15%;
        overflow: hidden;
      }
    }
    .conten-tz  {
         width: 80%;
         border: 1px solid #cacaca;
         height: 50px;
         line-height: 40px;
         text-align: center;
         overflow: hidden;
    }
    .conten-img {
      width: 14%;
    }
    .conten-txt {
      height: 25px;
      line-height: 25px;
    }
</style>

